<template>
    <div class="classify" v-if="data">
        <!--    分类页面-->
        <!--    <van-sidebar v-model="activeKey">-->
        <!--      <van-sidebar-item title="标签名称" v-for="sidebar in 9" />-->
        <!--    </van-sidebar>-->

        <van-sidebar v-model="activeKey">
            <router-link :to="'/classify/recommend/' + categoryList.id" v-for="categoryList in data.categoryList"
                         :key="categoryList.id">
                <van-sidebar-item :title="categoryList.name"/>
            </router-link>
        </van-sidebar>
        <!--    <div class="sidebar">-->
        <!--&lt;!&ndash;      <router-link to="/classify/recommend">居家</router-link>&ndash;&gt;-->
        <!--      <router-link :to="'/classify/recommend?id=' + categoryList.id"-->
        <!--                   v-for="categoryList in data.categoryList" :key="categoryList.id">{{ categoryList.name }}</router-link>-->
        <!--    </div>-->
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        <!--  Tabbar标签底栏  -->
        <van-tabbar v-model="active" active-color="#F6412D" :fixed="true" :border="true">
            <van-tabbar-item replace to="/index" icon="home-o">主页</van-tabbar-item>
            <van-tabbar-item replace to="/classify" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "Classify",
        data() {
            return {
                activeKey: 0,
                active: 1,
                data: null
            }
        },
        watch: {
            $route(to, from) {
                // console.log(1)
                // console.log(to.path)
            }
        },
        async created() {
            const get1 = await this.$get('catalog/index')
            this.data = get1.data.data
            // console.log(get1)
            // console.log(get1.data.data.categoryList)
            if (Boolean(this.$route.params.active)) {
                this.activeKey = this.$route.params.active
            }
        }
    }
</script>

<style lang="less" scoped>
  .classify {
    display: flex;
    flex-direction: row;

    .van-sidebar {
      width: 104px;
      text-align: center;
    }

    .van-sidebar-item--select::before {
      background-color: skyblue;
    }
  }

  .sidebar {
    width: 103px;
    height: 667px;
    background-color: skyblue;
    display: flex;
    flex-direction: column;

    > a {
      height: 58px;
      line-height: 58px;
      font-size: 14px;
      text-align: center;
      color: black;
    }

    .active {
      color: red;
    }
  }
</style>
